<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/bootstrap.min.css">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/font-awesome.min.css">
    <!-- owl.carousel CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/owl.carousel.css">
    <link rel="stylesheet" href="assets2/css/owl.theme.css">
    <link rel="stylesheet" href="assets2/css/owl.transitions.css">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/animate.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/normalize.css">
    <!-- meanmenu icon CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/meanmenu.min.css">
    <!-- main CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/main.css">
    <!-- educate icon CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/educate-custon-icon.css">
    <!-- morrisjs CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/morrisjs/morris.css">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- metisMenu CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="assets2/css/metisMenu/metisMenu-vertical.css">
    <!-- calendar CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="assets2/css/calendar/fullcalendar.print.min.css">
    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/style.css">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" href="assets2/css/responsive.css">
    <!-- modernizr JS
		============================================ -->
    <script src="assets2/js/vendor/modernizr-2.8.3.min.js"></script>






    <!--旧配置-->
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">
    <!--====== Magnific Popup CSS ======-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--====== Slick CSS ======-->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!--====== Line Icons CSS ======-->
    <link rel="stylesheet" href="assets/css/LineIcons.css">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!--====== Default CSS ======-->
    <link rel="stylesheet" href="assets/css/default.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div style="margin-bottom: 100px">
    <div class="header"></div>

    <div class="jumbotron" style="margin-top: 70px">
        <h1 class="display-4">你好,博客!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">欢迎光临</a>
    </div>

    <span class="btn-group-vertical"style="float: left">
    <div class="btn-group-vertical"style="float: left">
            <div class="left-custom-menu-adp-wrap comment-scrollbar">
                <nav class="sidebar-nav left-sidebar-menu-pro">
            <ul class="metismenu" id="menu1">
                <li>
                    <a class="has-arrow" href="personal.html">
                        <span class="educate-icon educate-home icon-wrap"></span>
                        <span class="mini-click-non">个人信息</span>
                    </a>
                    <ul class="submenu-angle" aria-expanded="true">
                        <li><a title="Dashboard v.1" href="personal.html"><span class="mini-sub-pro">个人信息展示</span></a></li>
                        <li><a title="Dashboard v.2" href="personalupdate.html"><span class="mini-sub-pro">个人信息修改</span></a></li>
                        <li><a title="Dashboard v.2" href="passwordupdate.html"><span class="mini-sub-pro">修改密码</span></a></li>
                    </ul>
                </li>
                <li>
                    <a class="has-arrow" href="clooect.html" aria-expanded="false"><span class="educate-icon educate-professor icon-wrap"></span> <span class="mini-click-non">我的收藏</span></a>
                </li>
                <li>
                    <a class="has-arrow" href="like.html" aria-expanded="false"><span class="educate-icon educate-student icon-wrap"></span> <span class="mini-click-non">我的点赞</span></a>
                </li>
                <li>
                    <a class="has-arrow" href="all-courses.html" aria-expanded="false"><span class="educate-icon educate-course icon-wrap"></span> <span class="mini-click-non">系统通知</span></a>
                </li>
                <li>
                    <a class="has-arrow" href="all-courses.html" aria-expanded="false"><span class="educate-icon educate-library icon-wrap"></span> <span class="mini-click-non">权限管理</span></a>
                </li>
                <li>
                    <a class="has-arrow" href="all-courses.html" aria-expanded="false"><span class="educate-icon educate-department icon-wrap"></span> <span class="mini-click-non">标签管理</span></a>
                </li>
            </ul>
                </nav>
            </div>
        </div>
    </span>
    <span>
        <div style="margin-left: 380px";class="container">
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default" v-on:click="refreshArticleList()">搜索</button>
            </form>
        </div>
        <div>
            <div class="row col-sm-8 offset-md-4" style="margin-top: 5%;">
                <table class="table">
                    <thead class="thead-dark">
                    <tr>
                        <th scope="col">文章标题</th>
                        <th scope="col">阅读</th>
                    </tr>
                    </thead>
                    <tr v-for="article in articleList">
                        <td>{{article.articleName}}</td>
                        <td>
                            <button type="button" class="btn btn-primary" @click="toUpdate(article.articleId)">阅读
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
            <form action="" class="form-group" style="margin-top: 40px">
                <div class="offset-4">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous" aria-hidden="true"
                                   v-on:click="backward">
                                    &laquo;
                                </a>
                            </li>
                            <li class="page-item"><a v-on:click="time" class="page-link" href="#">时间排序</a></li>
                            <li class="page-item"><a v-on:click="firstPage" class="page-link" href="#">首页</a></li>
                            <input id="input" type="text" class="col-sm-1" style="border-color: rgb(222,226,230);">
                            <button type="button" class="btn btn-primary" v-on:click="jump">跳转到/页</button>
                            <li class="page-item"><a v-on:click="lastPage" class="page-link" href="#">尾页</a></li>
                            <li class="page-item"><a v-on:click="Likes" class="page-link" href="#">点赞排序</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next" aria-hidden="true" v-on:click="forward">
                                    &raquo;
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </form>
        </div>

    </span>
</div>
<div style="margin-top: 450px">
    <section class="footer-area footer-dark">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="footer-logo text-center">
                        <a class="mt-30" href="index.html"><img src="assets/images/logo.svg" alt="Logo"></a>
                    </div> <!-- footer logo -->
                    <ul class="social text-center mt-60">
                        <li><a href="#"><i class="lni lni-facebook-filled"></i></a></li>
                        <li><a href="#"><i class="lni lni-twitter-original"></i></a></li>
                        <li><a href="#"><i class="lni lni-instagram-original"></i></a></li>
                        <li><a href="#"><i class="lni lni-linkedin-original"></i></a></li>
                    </ul> <!-- social -->
                    <div class="footer-support text-center">
                        <span class="number">+8801234567890</span>
                        <span class="mail">support@uideck.com</span>
                    </div>
                    <div class="copyright text-center mt-35">
                        <p class="text">Copyright &copy; 2020.Company name All rights reserved.</p>
                    </div> <!--  copyright -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </section>

</div>





<!-- jquery
    ============================================ -->
<script src="assets2/js/vendor/jquery-1.12.4.min.js"></script>
<!-- bootstrap JS
    ============================================ -->
<script src="assets2/js/bootstrap.min.js"></script>
<!-- wow JS
    ============================================ -->
<script src="assets2/js/wow.min.js"></script>
<!-- price-slider JS
    ============================================ -->
<script src="assets2/js/jquery-price-slider.js"></script>
<!-- meanmenu JS
    ============================================ -->
<script src="assets2/js/jquery.meanmenu.js"></script>
<!-- owl.carousel JS
    ============================================ -->
<script src="assets2/js/owl.carousel.min.js"></script>
<!-- sticky JS
    ============================================ -->
<script src="assets2/js/jquery.sticky.js"></script>
<!-- scrollUp JS
    ============================================ -->
<script src="assets2/js/jquery.scrollUp.min.js"></script>
<!-- mCustomScrollbar JS
    ============================================ -->
<script src="assets2/js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="assets2/js/scrollbar/mCustomScrollbar-active.js"></script>
<!-- Charts JS
    ============================================ -->
<script src="assets2/js/charts/Chart.js"></script>
<script src="assets2/js/charts/rounded-chart.js"></script>
<!-- metisMenu JS
    ============================================ -->
<script src="assets2/js/metisMenu/metisMenu.min.js"></script>
<script src="assets2/js/metisMenu/metisMenu-active.js"></script>
<!-- tab JS
    ============================================ -->
<script src="assets2/js/tab.js"></script>
<!-- plugins JS
    ============================================ -->
<script src="assets2/js/plugins.js"></script>
<!-- main JS
    ============================================ -->
<script src="assets2/js/main.js"></script>
<!-- tawk chat JS
    ============================================ -->
<script src="assets2/js/tawk-chat.js"></script>
</body>

</html>
<script>
    //在js中引入页眉页脚
    $(document).ready(function () {
        $('.header').load('header.html');
        $('.footer').load('footer.html');
    });


    var vm1 = new Vue({
        el: '#div_vue',
        data: {
            articleList: []
        },
        methods: {
            firstPage: function () {
                var url = "ArticlePagination1.do";
                console.log("首页");
                let parm = {a: 0, b: 1};
                let thisObj = this;
                doPost(url, parm, function (data) {
                    console.log(data);
                    thisObj.articleList = data;
                })
            },
            backward: function () {
                console.log("后退函数");
                url = "ArticlePagination1.do";
                let parm = {a: 1, b: -168};
                let thisObj = this;
                doPost(url, parm, function (data) {
                    console.log(data);
                    thisObj.articleList = data;
                })
            },
            forward: function () {
                console.log("前进函数");
                let url = "ArticlePagination1.do";
                let parm = {a: 0, b: -168};
                let thisObj = this;
                doPost(url, parm, function (data) {
                    console.log(data);
                    thisObj.articleList = data;
                });
            },
            jump: function () {
                console.log("页码跳转");
                let url = "ArticlePagination1.do";
                let b = $("#input").val();
                let parm = {a: 0, b: b};
                let thisObj = this;
                doPost(url, parm, function (data) {
                    console.log(data);
                    thisObj.articleList = data;
                });
            },
            lastPage: function () {
                console.log("尾页");
                let url = "lastPage.do";
                let thisObj = this;
                doGet(url, function (data) {
                    console.log(data);
                    thisObj.articleList = data;
                });
            },
            // Likes: function () {
            //     console.log("点赞排序");
            //     let url = "ArticlePagination1.do";
            //     let parm = {a: 0, b: 1, c: 1};
            //     let thisObj = this;
            //     doPost(url, parm, function (data) {
            //         console.log(data);
            //         thisObj.articleList = data;
            //     })
            // },
            // time: function () {
            //     console.log("时间排序");
            //     let url = "ArticlePagination1.do";
            //     let parm = {a: 0, b: 1, c: 0};
            //     let thisObj = this;
            //     doPost(url, parm, function (data) {
            //         console.log(data);
            //         thisObj.articleList = data;
            //     })
            // },
            toUpdate: function (id) {
                let url = "collectArticle.do";
                let params = {articleId: id};
                postWithoutJson(url, params, function (resp) {
                    console.log(resp)
                });
                console.log(id);
                location.href = "updateArticle.html?articleId=" + id;
            },
            refreshArticleList: function () {
                let url = "ArticlePagSearch.do";
                let searchArticleVal = $("#insearch").val();
                let params = {searchArticle: searchArticleVal, a: 0, b: 1, c: 2};
                let thisObj = this;
                if (searchArticleVal == null || searchArticleVal == '' || searchArticleVal == undefined) {
                    alert("请输入搜索内容");
                    return;
                }
                //ajax请求
                doPost(url, params, function (resp) {
                    //返回的文章集合传给data
                    thisObj.articleList = resp;
                    console.log(thisObj.articleList);
                })
            },
        },
        mounted: function () {
            this.firstPage();
        },
    });

</script>
